<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
</head>
<body>

    <div id="app-24">
        <button type="button" @click="test">测试</button>
        <div v-for="site in info">
            {{site}}
        </div>
        <button type="button" @click="test_post">post测试</button>
        {{info2}}

        <button type="button" @click="test4">箭头函数`res` 测试</button>
        {{songs}}
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: "#app-24",
            data: {
                info: "",
                info2: "",
                songs: ""
            },
            methods: {
                test: function () {
                    axios
                        .get('json/json_demo.json')
                        .then(response => (this.info = response.data.sites))
                    .catch(function (error) {
                        console.log(error)
                    })
                },
                test_post: function () {
                    axios
                    .post("https://localhost:9098/blog/upload", {
                        name: "张三",
                        age: "20",

                    })
                    .then(response => (this.info2 = response))
                    .catch(function (error) {
                        console.log(error)
                    })
                },
                test3: function () {
                    axios({
                        url: "https://localhost:9098/blog/upload",
                        method: "post",
                        params: {
                            name: "张三"
                        },
                        headers: {
                            // 设置请求头
                        },
                        data: {
                            // 设置请求体 （post / put）
                        }
                    }).then(function (res) {
                        console.log(res)
                    });
                },
                test4: function () {
                    // 发送异步请求
                    axios
                    .get("json/json_demo2.json")
                    .then((res) => {
                        // res 并不是接口返回的数据，而是表示一个响应数据：res.data 才表示接口响应的数据
                        this.songs = res.data.songs[0];
                        console.log(res.data.songs)
                    })
                }
            }
        })
    </script>
</body>
</html>